<template>
  <div style="padding:30px;">
    <Breadcrumb />
    <el-card style="margin: 20px 0;">
      <el-alert
        title="添加商品信息"
        type="info"
        center
        show-icon
      />
      <el-steps style="margin:20px 0;" align-center :active="active" :space="200" finish-status="success">
        <el-step description="基本信息" />
        <el-step description="商品参数" />
        <el-step description="商品属性" />
        <el-step description="商品图片" />
        <el-step description="商品内容" />
        <el-step description="完成" />
      </el-steps>

      <el-tabs tab-position="left" @tab-click="handleClick">
        <el-tab-pane label="基本信息">
          <el-form label-position="top" :model="addGoodsForm" :rules="rules">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addGoodsForm.goods_name" />
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="addGoodsForm.goods_price" />
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addGoodsForm.goods_weight" />
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addGoodsForm.goods_number" />
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader
                ref="check"
                v-model="addGoodsForm.goods_cat"
                v-loading="loading"
                :emit-path="false"
                :options="classifyList"
                :props="props"
                value-key="cat_id"
                @focus="onFocus"
                @change="handleChange"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数">
          <el-form label-position="top">
            <el-form-item v-for="item in goodsParameter" :key="item.attr_id">
              <div>{{ item.attr_name }}</div>
              <el-checkbox
                v-for="(item1,index) in item.attr_vals"
                :key="index"
                :label="item1"
                border
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品属性">
          <el-form label-position="top">
            <el-form-item v-for="item in goodsAttribute" :key="item.attr_id" :label="item.attr_name">
              <el-input />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品图片">
          <el-upload
            class="upload-demo"
            action="https://www.liulongbin.top:8888/api/private/v1/upload"
            :file-list="fileList"
            list-type="picture"
            :on-success="onSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容">
          <quill-editor
            ref="myQuillEditor"
            style="height:300px;margin-bottom:30px;"
            @blur="onEditorBlur"
          />
          <el-button type="primary" style="margin-top:50px;" @click="addNewGoods">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { goodsClassify } from '@/api/classify.js'
import { getParameterList } from '@/api/parameter.js'
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { addGoods } from '@/api/goods.js'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: '',
      fileList: [],
      active: 0,
      loading: false,
      addGoodsForm: {
        goods_name: '',
        goods_price: '',
        goods_cat: [],
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [],
        attrs: []
      },
      rules: {
        goods_name: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '商品价格不能为空', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '商品列表不能为空', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '商品数量不能为空', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '商品重量不能为空', trigger: 'blur' }

        ]
      },
      classifyList: [],
      props: {
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id'
      },
      catId: 0,
      goodsParameter: [], // 商品参数
      goodsAttribute: [] // 商品属性
    }
  },
  created() {

  },

  methods: {
    // 获取商品数据列表
    async loadGoodsClassify() {
      this.loading = true
      const res = await goodsClassify()
      this.classifyList = res
      this.loading = false
    },
    handleChange(val) {
      const res = this.$refs.check.getCheckedNodes()
      this.catId = res[0].data.cat_id
    },
    async handleClick(tab) {
      this.active = tab.index - 0
      if (tab.index === '1') {
        const res = await getParameterList(this.catId, 'many')
        this.goodsParameter = res
        this.goodsParameter.forEach(item => {
          item.attr_vals = item.attr_vals.split(',')
        })
      }
      if (tab.index === '2') {
        const res = await getParameterList(this.catId, 'only')
        this.goodsAttribute = res
      }
    },
    // 当商品获得焦点的时候 发送数据获得商品分类数据
    onFocus() {
      this.loadGoodsClassify()
    },
    // 上传图片成功的钩子函数 对图片进行处理
    onSuccess(response, file, fileList) {
      this.addGoodsForm.pics.push({ 'pic': file.url })
    },
    // 富文本失去焦点
    onEditorBlur() {
      this.addGoodsForm.goods_introduce = this.$refs.myQuillEditor._content
    },
    // 点击确认添加新商品
    async addNewGoods() {
      this.addGoodsForm.goods_cat = this.addGoodsForm.goods_cat.join(',')
      try {
        await addGoods(this.addGoodsForm)
        this.$message.success('添加成功')
        this.$router.push('/goods')
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-step__description {
  margin: 15px 0;
}
</style>
